import { useContext, useState } from 'react';
import { NavBar, List, Input, TextArea } from "antd-mobile";
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function(props) {
  const mySdkStore = useContext(MySdkStoreContext);
  const { cid, navTitle, modifyKey, updateType, updateApi, value: defaultValue, inputType, rules, onClose } = props;
  const [value, setValue] = useState(defaultValue);

  // 保存”群信息“事件
  const handleSave = async () => {
    // 昵称、群备注 没有找到api
    if (updateApi === 'updateGroup') {
      await mySdkStore.sdk.updateGroup({ cid, updateType, group: { [modifyKey]: value }});
    } else if (updateApi === 'updateUserInfoInGroup') {
      await mySdkStore.sdk.updateUserInfoInGroup({ cid, type: modifyKey, value });
    }
    onClose(true);
  }

  return (<div>
      <NavBar
        onBack={() => onClose(false)} style={{ background: '#fff', border: 'none' }}
        right={<a style={{ fontSize: 17 }} onClick={handleSave}>保存</a>}>{ navTitle }</NavBar>
      <List style={{ margin: '12px 0' }}>
        <List.Item>
        {
          inputType === 'textArea' ?
            <TextArea maxLength={100 || rules.maxLength} rows={4} defaultValue={defaultValue} placeholder="请输入" onChange={val => setValue(val)} /> :
            <Input maxLength={10 || rules.maxLength}  defaultValue={defaultValue} placeholder="请输入" onChange={val => setValue(val)} />
        }
        </List.Item>
      </List>
    </div>
  )
}